<template>
  <div class="overseas-list">
    <div class="title">
      <div class="block"></div>
      <div class="word">
        留学订单列表
      </div>
      <div class="button">
        <el-button class="el-button"
                   @click="refresh">刷新</el-button>
      </div>
    </div>
    <div>
      <search :formInline="formInline"
              @getSearchList="getSearchList">
        <!-- <template v-slot:advanced-search>
          <div>
            <el-button class="advanced-button">高级检索</el-button>
          </div>
        </template> -->
        <div class="search-form">
          <el-form :inline="true"
                   :model="formInline"
                   class="demo-form-inline">
            <el-form-item class="el-form-item"
                          label="输入搜索 :">
              <el-input class="el-input"
                        v-model="formInline.orderUserId"
                        placeholder="订单编号"></el-input>
            </el-form-item>
            <el-form-item label="学生 :">
              <el-input class="el-input"
                        v-model="formInline.namePhone"
                        placeholder="收货人姓名/手机号码">
              </el-input>
            </el-form-item>
            <el-form-item label="提交时间 :">
              <el-date-picker v-model="formInline.createTime"
                              format="yyyy/MM/dd"
                              value-format="yyyy/MM/dd"
                              :editable="false"
                              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </search>
    </div>
    <div>
      <datashow>
        <template v-slot:button>
          <el-button class="el-button">关闭</el-button>
        </template>
        <template v-slot:form>
          <el-table class="el-table"
                    ref="multipleTable"
                    :data="tableData"
                    border
                    style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="orderId"
                             label="订单编号"> </el-table-column>
            <el-table-column prop="createTime"
                             label="提交时间"> </el-table-column>
            <el-table-column prop="userId"
                             label="用户账号"> </el-table-column>
            <el-table-column prop="username"
                             label="姓名"> </el-table-column>
            <el-table-column prop="amount"
                             label="订单金额"> </el-table-column>
            <el-table-column prop="paymentMethod"
                             label="支付方式"> </el-table-column>
            <el-table-column prop="orderSource"
                             label="订单来源"> </el-table-column>
            <el-table-column prop="statusName"
                             label="订单状态"> </el-table-column>
            <el-table-column prop="operation"
                             label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)"
                           type="text"
                           size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="bottom">
            <paging :total="total"
                    @size="size"
                    @currentpage="currentpage"></paging>
          </div>
        </template>
      </datashow>
    </div>
    <div>
      <footerinfo></footerinfo>
    </div>
  </div>
</template>

<script>
import search from '../../../../component/search/search.vue'
import datashow from '../../../../component/datashow/datashow.vue'
import paging from '../../../../component/paging/paging.vue'
import footerinfo from '../../../../component/footer/footer.vue'
import { getOrderList } from '../../../../api/index'

export default {
  inject: ['reload'],
  name: 'overseasList',
  components: {
    search, //筛选查询组件
    datashow, //数据列表组件
    paging, //分页组件
    footerinfo, //页脚组件
  },

  data () {
    return {
      current: '',
      pagesize: '',
      orderType: '留学申请订单',
      total: 0,//一共多少条数据
      formInline: {
        orderUserId: '', //订单编号/账号
        namePhone: '', //用户呢称
        createTime: '', //注册时间
        orderSource: '',//订单来源
        orderType: '留学申请订单',//订单类型
        statusId: '',
      },
      tableData: [],
    }
  },
  mounted () {
    this.$emit("routeName", "overseasList");
    if (this.$route.params.statusName) {
      if (this.$route.params.statusName === "待支付押金") {
        this.statusId = 1
        this.getList()
      }
      else if (this.$route.params.statusName === "基本资料") {
        this.statusId = 3  //基本资料审核不通过
        this.getList()
      }
      else if (this.$route.params.statusName === "基本资料") {
        this.statusId = 6  //待文书确认
        this.getList()
      }
    }
    else {
      this.getList()
    }
  },

  methods: {
    refresh () {
      this.reload()
    },
    currentpage (val) {
      // console.log(val);
      this.current = val //得到新的当前页
      this.getList() //获取新的数据列表
    },
    size (val) {
      // console.log(val);
      this.pagesize = val //得到新当前页的一共几行数据
      this.getList() //获取新的数据列表
    },
    getList () {
      getOrderList(this.current, this.pagesize, this.formInline.orderUserId, this.formInline.namePhone,
        this.formInline.createTime, this.formInline.orderSource, this.formInline.orderType,
        this.formInline.statusId).then(data => {
          this.tableData = data.data.records;
          this.total = data.data.total
          // data.data.records.forEach(item => {
          //   this.tableData.push(item)
          // });   
          console.log(this.tableData);
        });
    },
    getSearchList () {
      this.current = '' //清空分页当前页数
      this.pagesize = ''//清空分页当前页的条数
      // console.log(this.formInline);
      // console.log(this.formInline.createTime.replace(/-/g,'/'));
      this.getList()
    },
    handleClick (val) {
      window.sessionStorage.setItem('orderId', val.orderId)
      window.sessionStorage.setItem('orderType', '留学申请订单')
      // window.sessionStorage.setItem('orderId','20210707111545')
      // console.log(window.sessionStorage.getItem('orderId'));
      if (val.statusName === "基本资料审核不通过") {
        this.$router.push({
          name: "nopassBaseInfo",
          params: {
            val: val
          },
        });
        // console.log(val);
      }
      else if (val.statusName === "待支付押金") {
        this.$router.push({
          name: "waitDeposit",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待审核基本资料") {
        this.$router.push({
          name: "waitVerifyBaseInfo",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待提交择校方案") {
        this.$router.push({
          name: "waitChooseSchool",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待学生确认择校方案") {
        this.$router.push({
          name: "waitStudentChoose",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待文书定稿") {
        this.$router.push({
          name: "waitText",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待提交申请材料") {
        this.$router.push({
          name: "waitConfirmInfo",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待确认申请材料") {
        this.$router.push({
          name: "waitConfirmInfo",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待支付申请费用") {
        this.$router.push({
          name: "waitPayFee",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待审核") {
        this.$router.push({
          name: "waitVerify",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待填写费用和佣金") {
        this.$router.push({
          name: "waitWriteFee",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待确认入读") {
        this.$router.push({
          name: "waitConfirmEnter",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "审核不通过") {
        this.$router.push({
          name: "noPassVerify",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "待上传申请材料") {
        this.$router.push({
          name: "waitCommitInfo",
          params: {
            val: val
          },
        });
      }
      else if (val.statusName === "已完成") {
        this.$router.push({
          name: "orderFinish",
          params: {
            val: val
          },
        });
      }
    }
  },
}
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.search-form {
  width: 100%;
  padding-top: 10px;
  padding-left: 10px;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}
.advanced-button {
  margin-right: 10px;
  width: 100px;
  height: 40px;
}
.el-button {
  margin-top: 5px;
  margin-right: 10px;
  width: 100px;
  height: 40px;
}
.bottom {
  margin: 10px 0;
  text-align: center;
}
</style>
